<template>
  <div ref="chart" class="chart"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useChart } from '../../hooks/useChart';
const chart = ref();
const { setOptions } = useChart(chart);
const option = {
  polar: {
    radius: ["10%", "65%"],
    center: ["25%", "50%"],
  },
  angleAxis: {
    min: 0, //最小刻度
    max: 5, //最大刻度
    startAngle: 120,
    show: true,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  radiusAxis: {
    type: "category",
    show: false,
  },
  tooltip: {
    show: false,
  },
  series: [
    {
      type: "bar",
      name: "数据展示1",
      data: [2],
      coordinateSystem: "polar",
      roundCap: false,
    },
    {
      type: "bar",
      name: "数据展示2",
      data: [1],
      coordinateSystem: "polar",
      roundCap: false,
    },
    {
      type: "bar",
      name: "数据展示3",
      data: [3],
      coordinateSystem: "polar",
      roundCap: false,
    },
    {
      type: "bar",
      name: "数据展示4",
      data: [4],
      coordinateSystem: "polar",
      roundCap: false,
    },
  ],
  legend: {
    top: '25%',
    right: '15%',
    itemHeight: 12,
    itemWidth: 32,
    itemGap: 25,
    borderRadius: 10,
    orient: 'vertical',
    show: true,
    data: ["数据展示1", "数据展示2", "数据展示3", "数据展示4"],
    textStyle: {
      color: "#DCECFF",
      fontSize: 16,
      padding:10,
    },
  },
};

const initChart = () => {
  setOptions(option)
};

onMounted(() => {
  initChart();
});
</script>